<template>
    <div class="DetailPage">
        <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
                <el-form :model="form">
                    <div class="row">
                        <div class="col">
                            <el-form-item label-width="68px" label="车辆编号">
                                <el-input v-model="form.id" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="68px" label="车牌号码">
                                <el-input v-model="form.licensePlate" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="68px" label="车型名称">
                                <el-select v-model="form.truckTypeId" placeholder="请选择" :disabled="isDisabled">
                                    <el-option
                                        v-for="item in truckTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <el-form-item label-width="68px" label="车辆体积">
                                <el-input v-model="form.allowableVolume" :disabled="isDisabled">
                                    <span slot="suffix">m³</span>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="68px" label="车辆载重">
                                <el-input v-model="form.allowableLoad" :disabled="isDisabled">
                                    <span slot="suffix">吨</span>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="68px" label="GPSID">
                                <el-input v-model="form.deviceGpsId" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col img-col disClick" ref="disClick1">
                            <p class="label">图片信息</p>
                            <el-image
                                v-for="e in imgList"
                                :key="e"
                                fit="cover"
                                style="width: 220px; height: 160px"
                                :src="e === 'empty' ? emptyImg : e"
                                :preview-src-list="imgList">
                            </el-image>
                        </div>
                    </div>
                </el-form>
                <el-divider></el-divider>
                <div class="row">
                    <div class="col btn-col" v-if="isDisabled">
                        <el-button class="btn" type="primary" @click="edit">编辑</el-button>
                    </div>
                    <div class="col btn-col" v-else>
                        <el-button class="btn" type="primary" @click="save">保存</el-button>
                        <el-button class="btn" @click="close">取消</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="行驶证信息">
                <el-form :model="form">
                    <div class="row">
                        <div class="col">
                            <el-form-item label-width="100px" label="行驶证号码">
                                <el-input v-model="form.id" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="100px" label="发动机号码">
                                <el-input v-model="form.licensePlate" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="100px" label="注册时间">
                                <el-input v-model="form.licensePlate" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <el-form-item label-width="100px" label="强制报废日期">
                                <el-input v-model="form.allowableVolume" :disabled="isDisabled">
                                    <span slot="suffix">m³</span>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="100px" label="有效期">
                                <el-input v-model="form.allowableLoad" :disabled="isDisabled">
                                    <span slot="suffix">吨</span>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="100px" label="检验有效期">
                                <el-input v-model="form.deviceGpsId" :disabled="isDisabled"></el-input>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <el-form-item label-width="100px" label="核定载质量">
                                <el-input v-model="form.allowableVolume" :disabled="isDisabled">
                                    <span slot="suffix">m³</span>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="col">
                            <el-form-item label-width="100px" label="整备质量">
                                <el-input v-model="form.allowableLoad" :disabled="isDisabled">
                                    <span slot="suffix">吨</span>
                                </el-input>
                            </el-form-item>
                        </div>

                        <div class="col">

                        </div>
                    </div>

                    <div class="row">
                        <div class="col img-col disClick" ref="disClick2">
                            <p class="label">图片信息</p>
                            <el-image
                                v-for="e in imgList"
                                :key="e"
                                fit="cover"
                                style="width: 220px; height: 160px"
                                :src="e === 'empty' ? emptyImg : e"
                                :preview-src-list="imgList">
                            </el-image>
                        </div>
                    </div>
                </el-form>
                <el-divider></el-divider>
                <div class="row">
                    <div class="col btn-col" v-if="isDisabled">
                        <el-button class="btn" type="primary" @click="edit">编辑</el-button>
                    </div>
                    <div class="col btn-col" v-else>
                        <el-button class="btn" type="primary" @click="save">保存</el-button>
                        <el-button class="btn" @click="close">取消</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { getCarItem } from '@/api/car-management'

export default {
    name: 'DetailPage',
    created () {
        this.render()
    },
    mounted () {
        this.$store.commit('setPageLoading', false)
    },
    data () {
        return {
            isDisabled: true,
            form: {},
            truckTypeList: [
                { value: '1575066321985286145', label: '4.2米厢式货车' },
                { value: '1575257460197634049', label: '12.8米厢式货车' }
            ],
            emptyImg: require('@/assets/others/car-img.png'),
            imgList: ['empty']
        }
    },
    methods: {
        async render () {
            const res = await getCarItem(this.$route.params.id)
            this.form = res.data.data
            if (this.form.picture) {
                this.$refs.disClick1.classList.remove('disClick')
                this.imgList = this.form.picture.split(',')
            } else {
                this.$refs.disClick1.classList.add('disClick')
                this.imgList = ['empty']
            }
            console.log(res)
        },
        edit () {
            this.isDisabled = false
        },
        save () {
            this.isDisabled = true
        },
        close () {
            this.isDisabled = true
        }
    }
}
</script>

<style scoped lang="scss">
.DetailPage {
    color: #2A2929;
    margin: 12px 12px 24px;

    ::v-deep .el-tabs {
        border-radius: 5px;
        overflow: hidden;

        .el-tabs__content {
            padding: 0;

            .el-form {
                padding: 40px 24px;

                .el-input span {
                    color: #2A2929;
                    margin-right: 4px;
                }
            }

            .row {
                display: flex;

                .col {
                    padding: 0 20px;
                    flex: 1;

                    label, .label {
                        font-size: 14px;
                        font-weight: bold;
                        color: #2A2929;
                    }

                    .label {
                        margin: 12px 12px 12px 0;
                    }

                    input {
                        color: #606266;
                    }

                    .el-select {
                        width: 100%;
                    }

                    img {
                        box-sizing: border-box;
                        border: 1px solid #D8DDE3;
                        border-radius: 5px;
                    }
                }

                .btn-col {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding-bottom: 24px;

                    button {
                        width: 100px;
                    }
                }

                .img-col {
                    display: flex;

                    .el-image {
                        margin-right: 12px;
                    }
                }

                .disClick {
                    pointer-events: none;
                }
            }
        }
    }
}
</style>
